<template>
	<div class="swiper t-swiper">
		<ul class="tabs swiper-wrapper">
			<li v-for="it in img" :key="it.id" class="swiper-slide">
				<img :src="it.url" />
				<p>{{it.txt}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	export default{
		name:"Tabs",
		props:['propstabs'],
		data(){
			return{
				img:[]
			}
		},
		updated(){
			new Swiper('.t-swiper',{
				slidesPerView:4,
			})
		},
		watch:{
			propstabs(){
				this.img=this.propstabs
			}
		}
	}
</script>

<style scoped>
	.tabs{
		padding: 0.08rem 0;
		display: flex;
		align-items: center;
	}
	.tabs li{
		width: 20%;
		text-align: center;
	}
	img{
		width: 0.9rem;
		height: 0.9rem;
	}
	p{
		padding: 0.1rem 0;
	}
	.t-swiper{
		padding: 0.2rem;
		border-top: 0.01rem solid gray;
	}
</style>
